<template>
  <div
    class="logo-container h-full flex items-center justify-start px-2 truncate"
    :class="{
      ['logo-container-' + theme.layout]: true,
    }"
  >
    <router-link to="/">
      <div class="flex items-center title text-base text-white" :class="{ 'hidden-xs-only': theme.layout === 'horizontal' }">
        <div class="h-6 w-6 mr-1 rounded-full" :class="{ 'bg-white': isImg }">
          <img class="w-full h-full" :src="backgroundUrl" />
        </div>
        <span>{{ title }}</span>
      </div>
    </router-link>
  </div>
</template>

<script>
  import { computed, defineComponent, ref } from 'vue'
  import { useStore } from 'vuex'
  import { GFCD } from '@/utils/utils'
  import request from '@/utils/request'

  export default defineComponent({
    name: 'VuiLogo',
    setup() {
      const store = useStore()
      const backgroundUrl = ref('')
      const getImg = async () => {
        const url = GFCD('dams')
        console.log('LOGO_IMAGE_BASE64======', store.getters['user/getAppInfo'])
        if (!store.getters['user/getAppInfo'].LOGO_IMAGE_BASE64) return
        let res = await request({
          url: `${url.domain}${url.baseUrl}`,
          method: 'post',
          data: {
            data: JSON.stringify({ FILE_SEQ: store.getters['user/getAppInfo'].LOGO_IMAGE_BASE64, '#OUTPUT_TYPE#': 'base64' }),
            method: 'dams.file.common.download',
          },
          // responseType: 'blob',
        })
        console.log(res)
        backgroundUrl.value = `data:image/${res.data[0].FILE_SUFFIX};base64,${res.data[0].BASE64_STRING}`
      }
      getImg()
      return {
        isImg: computed(() => {
          if (store.getters['user/getAppInfo'].LOGO_IMAGE_BASE64) {
            return true
          } else {
            return false
          }
        }),
        getAppInfo: computed(() => store.getters['user/getAppInfo']),
        logo: computed(() => store.getters['settings/logo']),
        title: computed(() => store.getters['user/getAppInfo'].APP_NAME),
        theme: computed(() => store.getters['settings/theme']),
        backgroundUrl,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .logo-container {
    // background: #293450;
    border-bottom: 1px solid #3c4048;
  }
</style>
